<template>
  <div class="home">
    <!-- <img class="back" src="../../assets/background1.png" alt=""> -->
    <div class="content">
      <!-- <div class="form">
        <el-form ref="form" :model="form" label-width="70px" inline-message>
          <el-form-item label="联系方式" >
            <el-input v-model="form.phone" class="input1"></el-input>
          </el-form-item>
          <el-form-item label="入住人数">
            <el-input v-model="form.num"></el-input>
          </el-form-item>
          <el-form-item label="入住日期">
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="退房日期">
            <el-date-picker
              v-model="form.date2"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div> -->
    </div>
    <div class="content2">
      <div class="content2_box">
        <Card></Card>
        <Card></Card>
        <Card></Card>
      </div>
      <!-- <div class="info1">周边景点</div>
      <div class="info2">特色美食</div>
      <div class="info3">房间设备</div> -->
    </div>
    <div class="transparentBox">现在，开启你的美好旅程。</div>
    <div class="content3">
      <div class="recommend">
        <div class="recommend_title_Z">推荐房型</div>
        <div class="recommend_title_Y">Recommend</div>
        <div class="recommend_conter">
          <div class="recommend_conter_left">
            <img src="../../assets/tuijian1.png" alt="" class="tuijian1" />
            <div class="recommend_conter_left_down">
              <div class="recommend_conter_left_down_title">尊贵海景套房</div>
              <div class="recommend_conter_left_down_detail">
                尊贵海景套房一幢暖色调小楼，背靠青山面朝绿水，有一座**、个性的波浪平桥连接着小溪两岸，有石阶曲径、亭台水榭装点。
              </div>
              <div class="recommend_conter_left_down_money">¥ 790元 / 晚</div>
              <div class="recommend_conter_left_down_button">
                <el-button type="primary" size="medium " round>立即预定</el-button>
              </div>
            </div>
          </div>
          <div class="recommend_conter_right">
            <div class="recommend_conter_right_top">
              <div class="recommend_conter_right_top_left">
                <img class="tuijian2" src="../../assets/tuijian2.png" alt="" />
              </div>
              <div class="recommend_conter_right_top_right">
                <div class="recommend_conter_right_top_right_title">**海景客房</div>
                <div class="recommend_conter_right_top_right_money">¥ 450元 / 晚</div>
                <div class="recommend_conter_right_top_right_button">
                  <el-button type="primary" size="medium " round>立即预定</el-button>
                </div>
              </div>
            </div>
            <div class="recommend_conter_right_down">
              <div class="recommend_conter_right_top_left">
                <img class="tuijian2" src="../../assets/tuijian3.png" alt="" />
              </div>
              <div class="recommend_conter_right_top_right">
                <div class="recommend_conter_right_top_right_title">贵宾海景房</div>
                <div class="recommend_conter_right_top_right_money">¥ 450元 / 晚</div>
                <div class="recommend_conter_right_top_right_button">
                  <el-button type="primary" size="medium " round>立即预定</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content4">
      <div class="block"></div>
      <div class="about">
        <div class="about_titleZ">关于我们</div>
        <div class="about_titleY">about</div>
        <div class="about_detail">
          某某民宿由一栋三间三层楼结合周边的庭院和琐碎空间组成，室内外空间将以简约**，带有禅意和日式的风格。一幢暖色调小楼，背靠青山面朝绿水，有一座**、个性的波浪平桥连接着小溪两岸，有石阶曲径、亭台水榭装点。有一种小桥流水人家的意境感。
        </div>
        <div class="about_logo">
          <img src="../../assets/logo.png" alt="" />
        </div>
      </div>
    </div>
    <!-- <div class="content5">
      <div class="news">
        <div class="news_titleZ">新闻动态</div>
        <div class="news_titleY">news</div>
        <div class="news_list_content">
          <div class="list_left">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>卡片名称</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                  >操作按钮</el-button
                >
              </div>
              <div v-for="o in 4" :key="o" class="text item">
                {{ "列表内容 " + o }}
              </div>
            </el-card>
          </div>
          <div class="list_right">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>卡片名称</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                  >操作按钮</el-button
                >
              </div>
              <div v-for="o in 4" :key="o" class="text item">
                {{ "列表内容 " + o }}
              </div>
            </el-card>
          </div>
          <div class="list_right"></div>
        </div>
      </div>
    </div> -->
    <!-- <div class="content6">
      <div class="content6_box">
        <div class="content6_box_card">
          <div class="contact_title_Z">联系我们</div>
          <div class="contact_title_Y">Contact</div>
          <div class="contact_detail">
            联系地址：广东省xxxxxxxxxxxxxxxxxxxx <br />E-mail： xxxxxxx@qq.com
            咨询热线：400-xxx-xxxx
          </div>
        </div>
      </div>
    </div> -->
    <div class="content7">
      Copyright © 2009-2011,www.xxxxxx.com,All rights reserved版权所有 © 您的网站名称
      未经许可 严禁复制
    </div>
  </div>
</template>

<script>
// import request from '../../Api/request';
import Card from "../../components/Card.vue";
export default {
  data() {
    return {
      form: {
        phone: "",
        num: "",
        date1: "",
        date2: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("提交");
    },
  },
  components: {
    Card,
  },
};
</script>

<style scoped>
.home {
  width: 100%;
}
.content {
  width: 100%;
  height: 100vh;
  background: url(../../assets/background1.png);
  position: relative;
}
.form {
  position: absolute;
  width: 300px;
  height: 300px;
  background: #fff;
  border-radius: 30px;
  top: 50%;
  left: 50%;
  padding: 50px;
  transform: translate(-50%, -50%);
}
.content2 {
  height: 150px;
  width: 100%;
  display: flex;
  justify-content: center;
  /* padding: 0 100px; */
}
.content2_box {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 30px 0;
}
.transparentBox {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  line-height: 350px;
  color: #fff;
  width: 100%;
  height: 400px;
  background-image: url("../../assets/background2.png");
  background-size: 100% 100%;
  background-attachment: fixed;
}
.content3 {
  height: 100vh;
  background: url("../../assets/background3.png");
  position: relative;
}
.recommend {
  position: absolute;
  margin-top: 20px;
  width: 1000px;
  height: 800px;
  left: 50%;
  transform: translateX(-50%);
}
.recommend_title_Z {
  font-size: 30px;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}
.recommend_title_Y {
  margin-top: 40px;
  font-size: 30px;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}
.recommend_conter {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
}
.recommend_conter_left {
  width: 550px;
  height: 600px;
  background-color: #fff;
}
.recommend_conter_right {
  width: 400px;
  height: 600px;
  /* background-color: #35ce4f; */
}
.tuijian1 {
  width: 100%;
  height: auto;
}
.recommend_conter_left_down {
  margin: 0 50px;
}
.recommend_conter_left_down_title {
  font-size: 25px;
  line-height: 25px;
  height: 30px;
  text-align: center;
}
.recommend_conter_left_down_detail {
  line-height: 30px;
  font-size: 18px;
  height: 90px;
}
.recommend_conter_left_down_money {
  font-size: 30px;
  text-align: center;
  color: #c39f67;
}
.recommend_conter_left_down_button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}
.recommend_conter_right_top {
  background-color: #fff;
  height: 280px;
  /* width: 100%; */
}
.recommend_conter_right_down {
  background-color: #fff;
  margin-top: 40px;
  height: 280px;
  width: 100%;
}
.recommend_conter_right_top {
  display: flex;
}
.recommend_conter_right_top_left {
  width: 60%;
  height: 100%;
}
.tuijian2 {
  width: 100%;
  height: 100%;
}
.recommend_conter_right_top_right {
  width: 40%;
  height: 100%;
  margin: 40px 0;
}
.recommend_conter_right_top_right_title {
  text-align: center;
  margin: auto;
  font-size: 25px;
  line-height: 25px;
  height: 30px;
}
.recommend_conter_right_top_right_money {
  font-size: 25px;
  text-align: center;
  color: #c39f67;
  margin: 20px 0;
}
.recommend_conter_right_top_right_button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}
.recommend_conter_right_down {
  display: flex;
}
.content4 {
  background: url(../../assets/background4.png);
  height: 600px;
  width: 100%;
  position: relative;
  display: flex;
}
/* .block{
  width: 800px;
  height: 600px;
} */
.about {
  position: absolute;
  /* margin-left: 57%; */
  left: 57%;
  height: 600px;
  width: 600px;
  padding: 50px;
  padding-bottom: 0;
}
.about_titleZ {
  font-size: 30px;
  text-align: center;
}
.about_titleY {
  text-align: center;
  font-size: 30px;
}
.about_detail {
  line-height: 30px;
  font-size: 18px;
}
.about_logo {
  height: 300px;
  width: 300px;
}
.content5 {
  height: 70vh;
  background: url("../../assets/background3.png");
  position: relative;
}
.news {
  width: 1000px;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.news_titleZ {
  font-size: 30px;
  text-align: center;
  margin-top: 50px;
}
.news_titleY {
  font-size: 30px;
  text-align: center;
}
.news_list_content {
  display: flex;
  justify-content: space-between;
  /* height: 400px; */
}
.list_left {
  background: #fff;
  width: 450px;
  /* height: 100%; */
}
.list_right {
  background: #fff;
  width: 450px;
  height: 100%;
  margin-left: 100px;
}

.content6 {
  height: 70vh;
  background: url("../../assets/background5.png");
  position: relative;
  display: flex;
  justify-content: center;
}
.content6_box {
  width: 1000px;
  height: 100%;
  /* background: #fff; */
  display: flex;
  align-items: center;
}
.content6_box_card {
  background: #fff;
  border-radius: 10px;
  height: 270px;
  width: 480px;
  padding: 50px;
}
.contact_title_Z {
  font-size: 30px;
  text-align: center;
}
.contact_title_Y {
  font-size: 30px;
  text-align: center;
}
.contact_detail {
  text-align: center;
  margin-top: 50px;
}

.content7 {
  text-align: center;
  height: 40px;
  line-height: 40px;
}
</style>

<style scoped>
.el-input--small .el-input__inner {
  width: 220px;
}
.el-button--primary {
  background-color: #c39f67;
  border-color: #c39f67;
}
.box-card {
  width: 450px;
}
</style>
